﻿<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>模板H5应用</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <style>
        .booklist {
            display: flex;
            flex-wrap: wrap;
        }

        .demo {
            border-radius: 3px;
            overflow: hidden;
            text-align: center;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 14px;
            align-items: center;
            padding: 10px 0;
            width: 50%;
        }

        .demo-image {
            display: inline-block;
            width: 100px;
            max-width: 100px;
            height: auto;
        }
    </style>
</head>

<body ontouchstart>
    <div id='tb' class="weui-tab" style="height:auto;">
        <div class="weui-tab__panel">
            <div id="c0" class="weui-tab__content">

                <!--搜索-->
                <div class="weui-search-bar" id="searchBar">
                    <form class="weui-search-bar__form" action="" id="searchform">
                        <div class="weui-search-bar__box">
                            <i class="weui-icon-search"></i>
                            <input class="weui-search-bar__input" id="searchInput" autocomplete="off" placeholder="搜索"
                                type="search">
                            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                        </div>
                        <label class="weui-search-bar__label" id="searchText"
                            style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                            <i class="weui-icon-search"></i>
                            <span>搜索</span>
                        </label>
                    </form>
                    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                </div>
                <!--顶部轮播-->
                <div class="slide" id="slide2">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <img src='/node_modules/LobsterUIFrame/weui/images/3.jpg' alt="">
                            </a>

                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src='/node_modules/LobsterUIFrame/weui/images/2.jpg' alt="">
                            </a>

                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src='/node_modules/LobsterUIFrame/weui/images/1.jpg' alt="">
                            </a>

                        </li>
                    </ul>
                    <div class="dot">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <!--图标分类-->
                <div class="weui-grids grids-small">
                    <a href="javascript:;" class="grid">
                        <div class="weui-grid__icon">
                            <img src="/node_modules/LobsterUIFrame/weui/images/icon_nav_button.png" alt="">
                        </div>
                        <p class="weui-grid__label">
                            功能
                        </p>
                    </a>
                    <a href="javascript:;" class="grid">
                        <div class="weui-grid__icon">
                            <img src="/node_modules/LobsterUIFrame/weui/images/icon_nav_cell.png" alt="">
                        </div>
                        <p class="weui-grid__label">
                            功能
                        </p>
                    </a>
                    <a href="javascript:;" class="grid">
                        <div class="weui-grid__icon">
                            <img src="/node_modules/LobsterUIFrame/weui/images/icon_nav_toast.png" alt="">
                        </div>
                        <p class="weui-grid__label">
                            功能
                        </p>
                    </a>
                    <a href="javascript:;" class="grid">
                        <div class="weui-grid__icon">
                            <img src="/node_modules/LobsterUIFrame/weui/images/icon_nav_dialog.png" alt="">
                        </div>
                        <p class="weui-grid__label">
                            功能
                        </p>
                    </a>
                </div>
                <!-- 瀑布流 -->
                <div class="page-bd-15" style="background-color: #F8F8F8;padding: 15px">
                    <!-- <div id="macy"> -->
                    <div class="booklist" id="booklist">
                    </div>
                    <div class="weui-loadmore" id="more">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                </div>
            </div>
            <div id="c1" class="weui-tab__content">
                <div class="page-bd-15">
                    <div class="weui-panel">

                        <!-- <div class="weui-panel__hd">图文组合列表</div> -->
                        <div class="weui-panel__bd" id="loginkuai2">
                            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" id="btnuser">
                                <div class="weui-media-box__hd">
                                    <div class="weui-avatar">
                                        <img id="imgUrl" src="/node_modules/LobsterUIFrame/weui/favicon.png"><span
                                            class="weui-icon-success weui-icon-safe-warn"></span>
                                    </div>
                                </div>
                                <div class="weui-media-box__bd">
                                    <h4 id="nickName" class="weui-media-box__title">未登录</h4>
                                    <p id="userName" class="weui-media-box__desc"></p>
                                </div>
                            </a>
                        </div>

                    </div>

                    <div class="weui-cells">
                        <a class="weui-cell weui-cell_access" href="javascript:;">
                            <div class="weui-cell__bd weui-cell_primary">
                                <p>帮助与反馈</p>
                            </div>
                            <span class="weui-cell__ft"></span>
                        </a>
                        <a class="weui-cell weui-cell_access" href="javascript:;">
                            <div class="weui-cell__bd weui-cell_primary">
                                <p>关于</p>
                            </div>
                            <span class="weui-cell__ft"></span>
                        </a>
                    </div>

                    <div class="weui-btn-area" id="divexit">
                        <a href="javascript:;" class="weui-btn weui-btn_warn" id="btnexit">退出登录</a>
                    </div>

                </div>
            </div>
        </div>

        <div class="weui-tabbar tab-bottom">
            <a href="javascript:;" class="weui-tabbar__item">
                <i class="icon icon-27 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">首页</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item ">
                <i class="icon icon-30 f27 weui-tabbar__icon"></i>
                <p class="weui-tabbar__label">我的</p>
            </a>
        </div>
    </div>
</body>

</html>


<script>

    lobsterh5.main({
        data: {
            loading: false, //状态标记
            page: 1,
            perPage: 5,
            flag: true
        },
        //初始化页面
        pageload: function () {
            this.initevent();
            this.loadbook();
            this.getUserInfo();
        },
        getUserInfo: function () {
            lobsterh5.GetMPUserInfo(user => {
                $("#imgUrl").attr("src", user.ImgUrl);
                $("#nickName").text(user.Nickname);
                $("#userName").text("账号:" + user.UserName);
            });
        },
        //初始化事件
        initevent: function () {
            var self = this;

            //显示退出登录按钮
            if (lobsterh5.hasLogin()) {
                $("#divexit").show();
            } else {
                $("#divexit").hide();
            }

            //退出登录
            $("#btnexit").click(function () {
                if (lobsterh5.hasLogin()) {

                    $.confirm("确定要退出当前帐号吗？", function () {
                        lobsterh5.ExitLogin();
                        location.href = 'index.html';
                    }, function () {
                        //点击取消后的回调函数
                    })
                }
            });


            $('#tb').tab({
                defaultIndex: 0,
                activeClass: 'weui-bar__item_on',
                onToggle: function (index) {
                    console.log(index)
                }
            });

            $('#slide2').swipeSlide({
                autoSwipe: true,//自动切换默认是
                speed: 3000,//速度默认4000
                continuousScroll: true,//默认否
                transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',//过渡动画linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
                lazyLoad: true,//懒加载默认否
                firstCallback: function (i, sum, me) {
                    me.find('.dot').children().first().addClass('cur');
                },
                callback: function (i, sum, me) {
                    me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
                }
            });

            //下拉加载数据
            $(document.body).infinite(100).on("infinite", function () {
                if (self.data.loading) return;
                self.data.loading = true;
                setTimeout(function () {
                    self.data.page++;
                    if (self.data.flag) {
                        self.loadbook();
                    }
                    self.data.loading = false;
                }, 1000);
            });

            $("#searchform").on('submit', function (event) {
                self.data.page = 1;
                event.preventDefault();
                $("#booklist").empty();
                self.loadbook();
            });

            $("#btnuser").click(function () {
                if (lobsterh5.hasLogin()) {
                    location.href = "/lobstersdk/edituser.html";
                } else {
                    location.href = "/lobstersdk/login.html?callback=" + encodeURI("/weuiapp/3215/index.html");
                }
            });
        },
        loadbook: function () {
            var self = this;
            var data = { "page": self.data.page, "limit": self.data.perPage, BookName: $("#searchInput").val(), delflag: 0 };
            $('.weui-loadmore').show();

            lobsterh5.GET("/lowcode/APP20210329185258876/BookManage/?view=layui&fun=book.getdata", data).then(res => {
                var data = res;
                if (data.length < self.data.perPage) {
                    self.data.flag = false//设置没有数据了标记
                    $(document.body).destroyInfinite();
                    $(".weui-loadmore").html("没有更多数据了");
                }
                $("#booklist").append(tpl(document.getElementById('tpl').innerHTML, { list: data }));
            })
        }
    });

</script>

<script id="tpl" type="text/html">
    <% for(var i in list) {   %>
    <div class="demo">
        <img src="images/book.png" class="demo-image">
        <span style="text-align: center;">
            <%=list[i].BookName%>
        </span>
    </div>
    <% } %>
</script>